<template>
  <div class="filter-fields">
    <div style="font-weight:700;color:#909399;margin-bottom:8px;display:flex;flex-direction: row;justify-content: space-between">
      <div style="border-left:2px solid #909399;padding-left:5px;">高级条件搜索</div>
      <el-button type="primary" @click="resetFilter" link>重置</el-button>
    </div>
    <div class="fields" v-for="(item, index) in config" :key="item.key">
      <div
        class="field-title"
        :class="
          !form[searchType]?.[item.key]?.length
            ? 'text-theme-color font-bold filed'
            : ''
        "
      >
        {{ item.title }}：
      </div>
      <div class="card-list" v-if="item.type === 'tags'" ref="tagsEl">
        <template v-if="item.key !== 'orgTypes'">
          <el-check-tag
            class="mx-1 mb-2"
            :checked="
              item.isRadio
                ? form[searchType]?.[item.key] == tag['dictValue']
                : form[searchType]?.[item.key]?.includes(tag['dictValue'])
            "
            @click="checkTag(item.key, item.isRadio, tag['dictValue'])"
            v-for="(tag, idx) in item.opts"
            :key="idx"
          >
            {{ tag["dictLabel"] }}
          </el-check-tag>
          <!-- 发布时间 -->
          <div
            v-if="
              item.key === 'publishTime' && form[searchType]?.[item.key] == '4'
            "
            class="flex items-center mb-2"
          >
            <el-date-picker
              v-model="publishTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="timeChange"
            />
          </div>
          <!-- 年度 -->
          <div
            v-if="
              item.key === 'years' &&
              form[searchType]?.[item.key]?.includes('0')
            "
            class="flex items-center mb-2"
          >
            <el-date-picker
              v-model="form[searchType][item.key2]"
              type="year"
              format="YYYY"
              value-format="YYYY"
              placeholder="选择资讯年度"
            />
          </div>
          <!-- 批次 -->
          <div
            v-if="
              item.key === 'batchs' &&
              form[searchType]?.[item.key]?.includes('0')
            "
            class="flex items-center mb-2"
          >
            <el-date-picker
              v-model="form[searchType][item.key2]"
              type="year"
              format="YYYY"
              value-format="YYYY"
              placeholder="选择项目批次"
            />
          </div>
        </template>
        <template v-else>
          <el-check-tag
            class="mx-1 mb-2"
            :checked="
              item.isRadio
                ? form[searchType]?.[item.key] == tag['dictValue']
                : form[searchType]?.[item.key]?.includes(tag['dictValue'])
            "
            @click="checkTag(item.key, item.isRadio, tag['dictValue'])"
            v-for="(tag, idx) in item.opts"
            :key="idx"
          >
            {{ tag["dictLabel"] }}
          </el-check-tag>
        </template>
      </div>
      <div class="address" v-else-if="item.type === 'address'">
        <!-- <el-tree-select
          v-model="abc"
          @change="addressChange"
          :data="item.opts"
          :render-after-expand="false"
          :props="{ nodeKey: 'id', valueKey: 'id' }"
          show-checkbox
          value-key="id"
          node-key="id"
        /> -->
        <el-cascader
          placeholder="不限"
          clearable
          :key="timeAduio"
          ref="cascader"
          :options="item.opts"
          :props="selectConfig"
          @change="addressChange"
          filterable
        />
      </div>
      <div class="interval" v-else-if="item.type === 'interval'">
        <el-input
          v-model="priceArea[item.key1]"
          placeholder="请输入立项金额"
          @input="(e:any) => validateInput(e, item.key1)"
          style="width: 127px"
        />
        &nbsp;
        &nbsp;
        <p>万</p>
        <span class="cut-line">-</span>
        <el-input
          v-model="priceArea[item.key2]"
          placeholder="请输入立项金额"
          @input="(e:any) => validateInput(e, item.key2)"
          style="width: 127px"
        />
        &nbsp;
        &nbsp;
        <p>万</p>
        <el-button type="primary" size="small" class="ml-3" @click="affirmArea">
          确认区间
        </el-button>
      </div>
      <div
        class="more-btn"
        v-if="containerInfo[index]?.hiddenIdx"
        @click="showMoreTag(index, tagsEl)"
      >
        <template v-if="!containerInfo[index].showMoreBtn">
          更多 <el-icon><ArrowDown /></el-icon>
        </template>
        <template v-else>
          收起 <el-icon><ArrowUp /></el-icon>
        </template>
      </div>
    </div>
    <!-- <div class="flex justify-end">
      <el-button plain type="info" :icon="RefreshRight" @click="resetFilter">
        重置筛选
      </el-button>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import {
  onBeforeUnmount,
  ref,
  defineProps,
  defineEmits,
  onBeforeUpdate,
  defineExpose
} from "vue";
import { ArrowDown, ArrowUp, RefreshRight } from "@element-plus/icons-vue";
import { useFilterFieldHooks } from "./hooks";

const props = defineProps(["config", "searchType"]);
const emits = defineEmits(["formChange"]);

const tagsEl = ref<any[]>([]);

const {
  currConfig,
  checkTag,
  form,
  selectConfig,
  checkFlexWrap,
  containerInfo,
  showMoreTag,
  addressChange,
  priceArea,
  affirmArea,
  validateInput,
  publishTime,
  timeChange,
  resetFilter,
  timeAduio
} = useFilterFieldHooks(emits);

onBeforeUpdate(() => {
  tagsEl.value = [];
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", () => {
    checkFlexWrap(tagsEl);
  });
});

defineExpose({ tagsEl });
</script>

<style scoped lang="postcss">
.filter-fields {
  @apply rounded-md;
  box-sizing: border-box;
  :deep(.el-check-tag){
    background-color: #F0F0F0;
    color:#606060;
    font-size:12px;
  }
  :deep(.el-check-tag.is-checked.el-check-tag--primary) {
    background-color: #E8F0FE;
    color: #1176DE;
}
  .fields {
    @apply flex mb-3 items-center;
    /* 下边框 border-b */
    &:last-child {
      @apply mb-0;
    }
    .field-title {
      @apply font-bold w-20 mb-2;
      font-size: 14px;
      font-family: Microsoft YaHei;
    }
    .file{
      color: #1176DE
    }
    .card-list {
      @apply items-center flex;
      flex-wrap: wrap;
      flex: 1;
    }
    .more-btn {
      @apply text-gray-400 cursor-pointer flex items-center;
      font-size: 14px;

    }
    .address {
      @apply pb-2;
      /deep/.el-cascader {
        width: 400px;
      }
    }
    .interval {
      @apply flex items-center pb-2;
      .cut-line {
        @apply mx-1;
      }
    }
  }
  .hidden {
    display: none;
  }
}
</style>
